<template>
  <div class="new_zj">
    <div class="img" @click="go_zj_details(f1)">
      <img :src="f1.picUrl" alt="" />
      <div
        class="play_btn"
        @click.stop="play_all_singer_album_center_fn(f1.id, f1)"
      >
        <div class="el-icon-caret-right"></div>
      </div>
    </div>
    <div class="zj_name">
      <span class="name">{{ f1.name }}</span>
      <span class="desc" v-if="f1.alias[0]"> ( {{ f1.alias[0] }} ) </span>
    </div>
    <div class="singer_name">{{ f1.artist.name }}</div>
  </div>
</template>

<script>
export default {
  name: "NewZj",
  props: {
    f1: {
      type: Object,
      defaut: () => {},
    },
  },
  methods: {
    // 点击跳转专辑详情你  Zjdetails
    // 点击专辑到专辑详情
    go_zj_details(item) {
      this.axios({
        method: "get",
        url: "/album/detail/dynamic",
        params: {
          id: item.id,
        },
      })
        .then((res) => {
          console.log(res);
          item.commentCount = res.data.commentCount;
          item.subCount = res.data.subCount;
          item.shareCount = res.data.shareCount;
          item.publishTime = this.ymd(item.publishTime);
          this.$store.commit("select_acchor_data", item);

          let artists = [];
          item.artists.forEach((v) => {
            artists.push(v, { name: "/" });
          });
          // 删除最后一个斜杆
          artists.pop();

          // 将修改好格式的数据传回去
          item.artists = artists;

          console.log("s数据", item);

          this.get_singer_album_center_fn(item.id, item);

          
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取专辑内容
    get_singer_album_center_fn(id, v) {
      this.axios({
        method: "get",
        url: "/album",
        params: {
          id: id,
        },
      })
        .then((res) => {
          console.log("我要加载多久");
          console.log(res);
          // 长度
          v.len = res.data.songs.length;
          v.all_album_music = res.data.songs;
          v.sg = "sg";

          // 遍历格式化时间
          res.data.songs.forEach((v1) => {
            v1.dt = this.hms(v1.dt);
          });
          console.log(res.data.songs);
          this.$nextTick(this.$store.commit("select_acchor_data", v));
          this.$router.push({ name: "Zjdetails" });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 在最新音乐界面的新碟上架  的新碟的每一项的中间的播放按钮  点击全部播放
    play_all_singer_album_center_fn(id, v) {
      this.axios({
        method: "get",
        url: "/album",
        params: {
          id: id,
        },
      })
        .then((res) => {
          console.log(res);
          // 长度
          v.len = res.data.songs.length;
          v.all_album_music = res.data.songs;
          v.sg = "sg";

          // 遍历格式化时间
          res.data.songs.forEach((v1) => {
            v1.dt = this.hms(v1.dt);
          });
          // 如果长度大于是  的切剩十条
          let ten = [];
          if (res.data.songs.length > 10) {
            v.active = 1;
            res.data.songs = res.data.songs.slice(0, 10);
          }
          v.album_music = res.data.songs;

          console.log(res.data.songs);
          this.$store.commit("select_acchor_data", v);

          setTimeout(() => {
            this.play_all_music(
              this.$store.state.select_acchor_data.all_album_music
            );
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 在play_all_singer_album_center_fn  方法调用
    play_all_music(item) {
      console.log(item);
      let len = this.$store.state.play_list.length;
      item.forEach((v) => {
        let play_info = {
          picUrl: "",
          name: "",
          playTime: "",
          song: {
            alias: [],
            artists: [{ name: "" }],
          },
          id: "",
          type: "singer_music",
        };
        play_info.picUrl = v.al.picUrl;
        //   音乐名称层
        play_info.name = v.name;
        //   播放时间
        play_info.playTime = v.playtime;
        //   播放时间  毫秒形式
        play_info.playTimeS = v.dt;
        //
        play_info.song.alias = "";
        //   歌手名称
        play_info.song.artists[0].name = v.ar[0].name;
        //   音乐的id
        play_info.id = v.id;

        this.$store.commit("play_list", play_info);
      });
      if (this.$store.state.play_list[len]) {
        this.$store.commit("src_id", this.$store.state.play_list[len].id);
        this.$store.commit("musis_info", this.$store.state.play_list[len]);
        this.$store.dispatch("get_src");
      } else {
        return;
      }
    },

    // 年月日
    ymd(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D;
      return strDate;
    },

    // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
  },
  
};
</script>

<style lang="less" scoped>
.new_zj {
  width: 100%;
  .img {
    width: 100%;
    // height: 100px;
    // background: aqua;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      //   height: 170px;
    }
    .play_btn {
      transition: opacity 0.5s;
      opacity: 0;
      z-index: 10000;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      .el-icon-caret-right {
        color: #e4393c;
        font-size: 30px;
      }
    }
    &:hover .play_btn {
      opacity: 0.8;
    }
  }
  .zj_name {
    cursor: pointer;
    margin-top: 5px;
    .name {
      color: #333;
      &:hover {
        color: black;
      }
    }
    .desc {
      color: #777;
    }
  }
  .singer_name {
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    &:hover {
      color: black;
    }
  }
}
</style>